<template>
  <view class="top-search" :style="{ paddingTop: statusBarHeight + 10 + 'px' }">
    <view
      class="logo"
      :style="{
        minHeight: capsule.height ? capsule.height + 'px' : 'auto',
        paddingRight: capsule.width + 'px',
      }"
    >
      logo
    </view>
    <view class="search-box">
      <view class="search">
        <wd-icon name="search" color="#f40" />
        <text> 请输入需要搜索的关键字. </text>
      </view>
      <view class="search-text"> 搜 索 </view>
    </view>
    <view class="notice-bar">
      <wd-notice-bar
        text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
        prefix="a-precisemonitor"
        color="#34D19D"
        background-color="#f0f9eb"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const props = defineProps();
const { statusBarHeight } = uni.getSystemInfoSync();
const capsule = computed(() => {
  let h = 0;
  let w = 0;
  // #ifdef MP-WEIXIN
  const { height, width } = uni.getMenuButtonBoundingClientRect();
  h = height;
  w = width;
  // #endif
  return { height: h, width: w };
});
onLoad(() => {
  console.log("asdasd");
});
</script>

<style lang="scss" scoped>
.top-search {
  padding: 10px 12px;
  background: linear-gradient(180deg, #fde5e3, #fff);
  .logo {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }
  .search-box {
    height: 30px;
    color: #999;
    gap: 10px;
    display: flex;
    align-items: center;
    padding: 2px 12px;
    padding-right: 2px;
    border-radius: 20px;
    border: 1px solid #f40;
    .search {
      flex: 1;
      gap: 10px;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .search-text {
      height: 100%;
      display: flex;
      align-items: center;
      color: #fff;
      padding: 2px 10px;
      border-radius: 20px;
      background-color: #f40;
      box-sizing: border-box;
    }
  }
  .notice-bar {
    margin-top: 12px;
  }
}
</style>
